<template>
  <el-form label-position="top" class="p-10">
    <el-form-item label="步骤条样式">
      <el-radio v-model="activeData.extConfig.direction" label=""
        >横项</el-radio
      >
      <el-radio v-model="activeData.extConfig.direction" label="vertical"
        >竖向</el-radio
      >
    </el-form-item>

    <el-form-item label="文字是否居中">
      <el-switch v-model="activeData.extConfig.isAlignCenter" />
    </el-form-item>
    <el-form-item label="结束状态">
      <el-select
        v-model="activeData.extConfig.finishStatus"
        placeholder="请选择"
      >
        <el-option
          v-for="item in finishStatusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="是否简洁风格">
      <el-switch v-model="activeData.extConfig.isSimple" />
      <el-tooltip
        class="item"
        effect="dark"
        content="设置简洁风格，该条件下 align-center / description / direction / space 都将失效 "
        placement="top"
      >
        <i class="el-icon-info"></i>
      </el-tooltip>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: "steps-config",
  props: ["activeData"],
  data() {
    return {
      finishStatusOptions: [
        {
          value: "wait",
          label: "等待",
        },
        {
          value: "process",
          label: "过程",
        },
        {
          value: "finish",
          label: "结束",
        },
        {
          value: "error",
          label: "失败",
        },
        {
          value: "success",
          label: "成功",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {},
};
</script>
